<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米商城 ｜ 首页✌️</title>
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <header>
    <div class="wrapper">
      <ul class="flex">
        <li><a href="#">小米商城</a></li>
        <li><a href="#">MIUI</a></li>
        <li><a href="#">IoT</a></li>
        <li><a href="#">云服务</a></li>
        <li><a href="#">天星数科</a></li>
        <li><a href="#">有品</a></li>
        <li><a href="#">小爱开放平台</a></li>
        <li><a href="#">企业团购</a></li>
        <li><a href="#">资质证照</a></li>
        <li><a href="#">协议规则</a></li>
        <li><a href="#">下载app</a></li>
        <li><a href="#">Select Location</a>aft</li>
      </ul>
      <ul class="flex">
        <li><a href="#">登陆</a></li>
        <li><a href="#">注册</a></li>
        <li class="no-gap"><a href="#">消息通知</a></li>
        <li class="cart"><a href="#"><i class="iconfont icon-cart"></i> 购物车（0）</a></li>
      </ul>
    </div>
  </header>
  <div>
    <nav class="wrapper align-items-center ">
      <a href="#"><img src="./imgs/logo-mi2.png" alt="" class="logo"></a>
      <ul class="flex justify-content-between">
        <li><a href="#">Xiaomi手机</a></li>
        <li><a href="#">Redmi 红米</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">笔记本</a></li>
        <li><a href="#">平板</a></li>
        <li><a href="#">家电</a></li>
        <li><a href="#">路由器</a></li>
        <li><a href="#">服务中心</a></li>
        <li><a href="#">社区</a></li>
      </ul>
      <div class="search-box">
        <input placeholder="123" type="text" name="" id="">
        <button><i class="iconfont icon-user"></i></button>
      </div>
    </nav>
    <div id="banner" class="wrapper">
      <aside>
        <div class="link">手机</div>
        <div class="link">电视</div>
        <div class="link">笔记本 平板</div>
        <div class="link">出行 穿戴</div>
        <div class="link">耳机 音响</div>
        <div class="link">家电</div>
        <div class="link">智能 路由器</div>
        <div class="link">电源 配件</div>
        <div class="link">健康 儿童</div>
        <div class="link">生活 箱包</div>
      </aside>
    </div>
    <div id="hot-products" class="wrapper">
      <ul class="flex">
        <li class="flex justify-content-center align-items-center"><a href="#"><i class="iconfont icon-user"></i>保障服务</a></li>
        <li class="flex justify-content-center align-items-center"><a href="#"><i class="iconfont icon-user"></i>保障服务</a></li>
        <li class="flex justify-content-center align-items-center"><a href="#"><i class="iconfont icon-user"></i>保障服务</a></li>
        <li class="flex justify-content-center align-items-center"><a href="#"><i class="iconfont icon-user"></i>保障服务</a></li>
        <li class="flex justify-content-center align-items-center"><a href="#"><i class="iconfont icon-user"></i>保障服务</a></li>
        <li class="flex justify-content-center align-items-center"><a href="#"><i class="iconfont icon-user"></i>保障服务</a></li>
      </ul>
      <div class="imgs flex">
        <a href="#"><img src="./imgs/p1.jpeg" alt=""></a>
        <a href="#"><img src="./imgs/p2.jpeg" alt=""></a>
        <a href="#"><img src="./imgs/p3.jpeg" alt=""></a>
      </div>
    </div>
  </div>
  <main>
  </main>


  <!-- 常用的html5的语义化标签 : 就是有语义的div-->
  <!-- <header></header>
  <nav></nav>
  <main>
    <aside></aside>
    <section>
      <article></article>
      <article></article>
      <article></article>
    </section>
  </main>
  <footer></footer> -->
</body>

</html>